<template>
  <el-input-number
    v-model="modelData"
    :min="_rules.min ?? undefined"
    :max="_rules.max ?? undefined"
    :controls="false"
    :disabled="_info.disabled || false"
    :precision="_rules.decimal || 0"
    :placeholder="_info.placeholder || '请输入'"
  />
</template>

<script setup>
import { getInfo, getRules } from '../const';

const props = defineProps({
  formInfo: {
    type: Object,
    default: () => {}
  },
  formData: {
    type: Object,
    default: () => {}
  },
  // 循环索引
  eachIndex: {
    type: Number,
    default: undefined
  },
  topExpose: {
    type: Object,
    default: () => {}
  }
});

const _info = computed(() => getInfo(props.formInfo));
const _rules = computed(() => getRules(props.formInfo));

const modelData = computed({
  get() {
    const eachIndex = props.eachIndex;
    if (eachIndex == undefined) return props.formData[_info.value.field];
    return props.formData[_info.value.field][eachIndex];
  },
  set(data) {
    const eachIndex = props.eachIndex;
    if (eachIndex == undefined) {
      return (props.formData[_info.value.field] = data);
    }
    return (props.formData[_info.value.field][eachIndex] = data);
  }
});
</script>

<style lang="scss" scoped>
:deep(input) {
  text-align: left !important;
}
</style>
